<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-spacing: 0;
            border-collapse: collapse;
        }
        td,th{
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
        }
    </style>
</head>
<body>
    <table id="tab">
       
    </table>
    <script>
        //9、扩展案例：以下是某班级一次考试的成绩表。请计算每个学生总成绩，并按总成绩排名。统计各单科成绩第一名，输出其成绩与学号。
        // 学号	语文	数学	英语	总成绩	备注
        // 1	 105	62	 118		
        // 2	 89	    78	  120		
        // 3	 86	    64	  80		
        // 4	 78  	99	  91		
        // 5	 107.5	97	  70		
        // 6	 112	61	  92		
        // 7	 101	79	  104		
        // 8	 71	    72	  105		
        // 9	 56	    68	  61		
        // 10	 98	    83	  77	

        //利用对象 和数组的结合
        var stu = [
            {xuehao:1,name:'zhangsan',chinese:15,math:62,english:118},
            {xuehao:2,name:'lisi',chinese:89,math:78,english:12},
            {xuehao:3,name:'张三',chinese:15,math:2,english:18},
            {xuehao:4,name:'李四',chinese:8,math:8,english:10},
            {xuehao:5,name:'李五',chinese:5,math:2,english:18},
            {xuehao:6,name:'李六',chinese:43,math:23,english:54},
            {xuehao:7,name:'李7',chinese:65,math:14,english:75},
            {xuehao:8,name:'李八',chinese:75,math:54,english:32},
            {xuehao:9,name:'李九',chinese:105,math:23,english:18},
            {xuehao:10,name:'李十',chinese:89,math:23,english:32}
        ]
       
           for(var i = 0 ; i < stu.length;i++){
                stu[i].total = stu[i].chinese + stu[i].math + stu[i].english
           }
           var cTop = stu.sort(function(a,b){
                return b.chinese - a.chinese
           })[0]
           var mTop = stu.sort(function(a,b){
                return b.math - a.math
           })[0]
           var eTop = stu.sort(function(a,b){
                return b.english - a.english
           })[0]

           stu.sort(function(a,b){
                return b.total - a.total
           })
           
           tab.innerHTML = '<tr><th>学号</th><th>名字</th><th>语文</th><th>数学</th><th>英文</th><th>备注</th></tr>'
           for(var j = 0 ; j < stu.length;j++){
                    var tips = ''
                    if(cTop.chinese === stu[j].chinese){
                        tips = '语文第一'
                    }else if(mTop.math === stu[j].math){
                        tips = '数学第一'
                    }else if(eTop.english === stu[j].english){
                        tips = '英文第一'
                    }

                    tab.innerHTML += '<tr>' +
                            '<td>' + stu[j].xuehao + '</td>' +
                            '<td>' + stu[j].name + '</td>' +
                            '<td>' + stu[j].chinese + '</td>' +
                            '<td>' + stu[j].math + '</td>' +
                            '<td>' + stu[j].english + '</td>' +
                            '<td>' + tips + '</td>' +
                            '</tr>'
           }
    </script>
</body>
</html>